import React, { Component } from 'react';
import { View, Text, TextInput } from 'react-native';

class PizzaTranslator extends Component {
    constructor(props){
        super(props);
        this.state = { text: '' }
    }

    changeText = text => {
        this.setState({text})
    }

    spliceText = text => {
        return text.split(' ').map(word => word && '🍕').join(' ')
    }

    render(){
        const { text } = this.state
        return (
            <View style={{flex: 1,padding: 10, paddingTop: 100,}}>
                <TextInput 
                    style={{height: 40,}} 
                    placeholder="type here to translate" 
                    onChangeText={text=>this.changeText(text)}
                />
                <Text style={{padding: 10, fontSize: 42}}>
                    {this.spliceText(text)}
                </Text>
            </View>
        )
    }
}

export default PizzaTranslator